<template>
    <div>
        <!-- 面包屑 -->
        <el-bread></el-bread>
        <!-- 添加 -->
            <el-button @click="add" type="primary" plain size="small"  >添加</el-button>
            <!-- 列表渲染 -->
            <v-list @edit='edit'></v-list>
            <!-- 弹框 -->
            <!-- 获取所有的属性方法    接收子组件的值   传给子组件值    -->
            <v-dialog ref="dialog" @cancel='cancel' :info='info'></v-dialog>
            <!-- dialog是弹框组件所有的属性方法 -->
    </div>
</template>
<script>
import vList from './list.vue'
import vDialog from './dialog.vue'
export default {
    data() {
        return {
            info:{
                // 弹窗的动态
                isShow:false,
                isAdd:true
            }
        }
    },
    methods: {
        
        add(){
            // 打开弹窗
            this.info.isShow = true
            // 是添加
            this.info.isAdd = true

        },
        cancel(e){
            // 可以使用e，也可以不使用，只是起到开关作用==
            this.info.isShow = false
        },
        // 打开编辑弹窗
        edit(e){
            // 打开弹窗
            this.info.isShow = true
            // 是编辑
            this.info.isAdd = false
            // 点击查询信息,
            this.$refs.dialog.lookup(e)
             
        }
    },
    components:{
        vList,
        vDialog
    }
}
</script>
<style scoped>
.el-button {
  margin: 20px;
}
</style>